<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI图片风格转换</title>
    <style>
        /* 现代风格CSS */
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: #f0f2f5;
            margin: 0;
            padding: 2rem;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            padding: 2rem;
            display: flex;
            gap: 2rem;
        }

        /* 左右布局样式 */
        .preview-section, .result-section {
            flex: 1;
            min-width: 0;
        }

        .image-container {
            aspect-ratio: 1;
            background: #f8f9fa;
            border-radius: 8px;
            border: 2px dashed #e9ecef;
            margin-bottom: 1rem;
            overflow: hidden;
            position: relative;
        }

        .image-preview {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: none;
        }

        .upload-label {
            display: block;
            text-align: center;
            padding: 1rem;
            color: #868e96;
            cursor: pointer;
        }

        select, button {
            width: 100%;
            padding: 12px;
            border: 1px solid #ced4da;
            border-radius: 6px;
            font-size: 16px;
            margin-bottom: 1rem;
            transition: all 0.2s;
        }

        select:focus, button:focus {
            outline: none;
            border-color: #228be6;
            box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.15);
        }

        button {
            background: #228be6;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background: #1971c2;
        }

        button:disabled {
            background: #adb5bd;
            cursor: not-allowed;
        }

        .error-message {
            color: #fa5252;
            margin-top: 1rem;
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 左侧上传预览区 -->
    <div class="preview-section">
        <div class="image-container">
            <img id="originalPreview" class="image-preview" alt="原图预览">
            <div class="upload-label">点击选择或拖放图片</div>
        </div>

        <!-- 风格选择下拉框 -->
        <!-- 注意：这里的value值需要与后端参数一致 -->
        <select id="styleSelect">
            <option value="anime">日漫风格</option>
            <option value="3d">3D特效</option>
            <option value="handdrawn">手绘风格</option>
            <option value="sketch">铅笔画</option>
        </select>

        <button id="processButton" onclick="processImage()">开始处理</button>
        <div id="errorMessage" class="error-message"></div>
    </div>

    <!-- 右侧结果展示区 -->
    <div class="result-section">
        <div class="image-container">
            <img id="processedPreview" class="image-preview" alt="处理结果预览">
            <div class="upload-label">处理结果将在此显示</div>
        </div>
    </div>
</div>

<script>
        // DOM元素引用
        const originalPreview = document.getElementById('originalPreview');
        const processedPreview = document.getElementById('processedPreview');
        const styleSelect = document.getElementById('styleSelect');
        const processButton = document.getElementById('processButton');
        const errorMessage = document.getElementById('errorMessage');

        // 图片上传处理
        document.querySelector('.image-container').addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';

            input.onchange = e => {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = () => {
                        originalPreview.src = reader.result;
                        originalPreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                }
            };
            input.click();
        });

        // 处理图片函数
        async function processImage() {
            const file = document.querySelector('input[type=file]').files[0];
            if (!file) {
                showError('请先选择图片');
                return;
            }

            // 禁用按钮并显示处理状态
            processButton.disabled = true;
            processButton.textContent = '处理中...';

            // 创建FormData对象
            // 注意：这里的字段名称需要与后端参数名称对应
            const formData = new FormData();
            formData.append('file', file);      // 文件参数（后端MultipartFile接收）
            formData.append('style', styleSelect.value); // 风格参数（后端String接收）

            try {
                // 注意：需要替换为实际的后端API地址
                const response = await fetch('http://localhost:9090/face/generateHumanAnimeStyle', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.text();

                if (result === 'fail') {
                    showError('图片处理失败，请重试');
                } else {
                    processedPreview.src = result;
                    processedPreview.style.display = 'block';
                    errorMessage.style.display = 'none';
                }
            } catch (error) {
                showError('网络请求失败');
            } finally {
                processButton.disabled = false;
                processButton.textContent = '开始处理';
            }
        }

        function showError(message) {
            errorMessage.textContent = message;
            errorMessage.style.display = 'block';
            processedPreview.style.display = 'none';
        }
    </script>
</body>
</html>